import React, { useEffect, useState } from 'react';
import {Layout, Menu, Skeleton} from 'antd';
import { useLocation } from 'react-router-dom';
import LogFactory from 'log/LogFactory';
import RequestHandler from "../../http/RequestHandler";
import useAsyncEffect from "../../hook/useAsyncEffect";

import {menuIconTransition} from "../../util/icon-util";
import UserStorage from "../../storage/local/UserStorage";
import {MenuTreeData} from "../../type/entity/SecurityMenu";

const { Sider } = Layout;
const log = LogFactory.getLogger("NavigateSiderComponent");
const pathnameReg = new RegExp("/\\w+/\\w+/\\w+");
export default function NavigateSider() {
    const [selectedKeys, setSelectedKeys] = useState<string[]>(['2bee409f1c0311ef8ade00155db88c7d']);
    const { pathname } = useLocation();
    const [ menuData, setMenuData ] = useState<MenuTreeData[]>([]);

    useAsyncEffect(async () => {
        const res = await RequestHandler.get<MenuTreeData[]>("/manager/admin/user-menu/tree/navigate");
        log.debug("获取用户菜单树", res);
        if (res.success){
            menuIconTransition(res.data);
            setMenuData(res.data);
        }
    });

    useEffect(() => {
        let regRes = pathname.match(pathnameReg);
        if(regRes){
            setSelectedKeys([regRes[0]]);
        }
    }, [pathname]);
    return (
        <Sider width={200} style={{
            paddingTop: 64,
            overflow: 'auto',
            height: '100vh',
            position: 'fixed',
            left: 0,
            top: 0,
            bottom: 0,
            zIndex: 99,
        }}>
            <Skeleton style={{
                paddingInline: "8px"
            }} loading={menuData.length <= 0} active={true} title={true} paragraph={{rows: 13}}>
                <Menu
                    theme="dark"
                    mode="inline"
                    selectedKeys={selectedKeys}
                    // defaultSelectedKeys={['/nav/admin/user', '/nav/admin/path']}
                    defaultOpenKeys={UserStorage.getInstance().getAdminPageConfigFromLocalStore().defaultExpand}
                    style={{ height: '100%', borderRight: 0 }}
                    items={menuData}
                />
            </Skeleton>
        </Sider>
    );
}
